<% extends "common/msui.html" %>
<% block title %>消息<% endblock %>
<% block body %>
<% set messages = _pool.get('sale.order')._get_message_by_website(order_id) %>
<% set order = _pool.get('sale.order').read(order_id, ['name', 'partner_id', 'note']) %>

<div class="page" id="message" ms-controller="message">
  <header class="bar bar-nav">
    <a class="button button-link button-nav pull-left back" href="/mshop" >
      <span class="icon icon-left"></span>
      返回
    </a>
    <h1 class="title">消息</h1>
  </header>

  <div class="content message-content" >
    <div class='weixin-flex evaluation-product'>
      <img ms-attr-src='/website/image/res.partner/{{order.partner_id[0]}}/image' ms-attr-alt='{{order.partner_id[1]}}' />
      <div class='evaluation-product-content'>
        <div>订单号：{{order.name}}</div>
        <div>备注：{{order.note}}</div>
      </div>
    </div>

    <div class='message-timeline'>
      <ul>
        <li ms-repeat='messages'>
          <div class='message-timeline-left'>
            <div class='message-timeline-left-date'>{{el.date}}</div>
            <div class='message-timeline-left-user'>{{el.user}}</div>
          </div>
          <div class='message-timeline-right'>
            <span class='messages-item-icon'></span>
            <div>{{el.message}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <script type="application/javascript" >
    $(function() {
      var messages = ${messages | tojson | safe};
      var order = ${order | tojson | safe}

      setTimeout(function() {
        var leftTimeline = $('.message-timeline-left')
        leftTimeline.css('left', -leftTimeline.width() - 10)
      }, 1)

      message_vm = avalon.define({
        $id: 'message',
        messages: messages,
        order: order,
      })

      avalon.scan();
    });
  </script>

<% endblock %>
</div>